<template>
    <div>
        <div>
            <page-header title="消息详情" content="Message details" />
            <page-main>
                <h1>
                    <el-page-header content="详情:" @back="goBack" />
                </h1>
            </page-main>
            <page-main>
                <el-row type="flex" justify="center" align="middle">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">

                        <h3 style="color: #498dff;">日期：{{time}}</h3>
                        <el-card class="box-card" shadow="always">
                            <!--标题预览-->
                            <h2 style="text-align: center;">{{ title }}</h2>
                        </el-card>
                        <el-card class="box-card" shadow="always">
                            <!--内容详情预览-->
                            <h2>内容详情：</h2>
                            <div class="preview" v-html="message_detail"/>
                        </el-card>
                        <el-row type="flex" justify="right" style="margin: 10px;">
                            <el-col :push="19">
                                <el-button type="danger" @click="deleteMessage">删除</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </page-main>

        </div>
    </div>
</template>

<script>
import PageHeader from '../../components/PageHeader/index'
import PageMain from '../../components/PageMain/index'
import api from '@/api'
import {Message} from 'element-ui'
export default {
    name: 'message.details',
    components: {PageMain, PageHeader},
    data() {
        return {
            title: '',
            time: '',
            receiver: null,
            message_id: null,
            message_detail: null
        }
    },
    created() {
        // 如果无参数直接访问本页面，则会被跳转其他页面
        if (this.$route.query.type == null) {
            this.$router.push({
                path: '/school/manage_message'
            })
        } else { // 如果携带参数访问本页面，则进行赋值操作
            this.title = this.$route.query.type.message_title
            this.time = this.$route.query.type.time
            this.receiver = this.$route.query.type.receiver
            this.message_id = this.$route.query.type.id
        }
        // 获取消息详情信息
        api.post('schoolMessage/findMessageDetail', { message_id: this.message_id, receiver: this.receiver})
            .then(res => {
                this.message_detail = res.data
            }).catch(error => {
                console.log(error)
                this.$router.push({
                    path: '/school/manage_message'
                })
            })
    },
    methods: {
        goBack() {
            this.$router.push('/school/manage_message')
        },
        deleteMessage() {
            this.$confirm('是否确认删除该消息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
                // 删除消息信息
                api.post('schoolMessage/deleteMessage', { message_id: this.message_id, receiver: this.receiver})
                    .then(res => {
                        Message.warning(res.msg)
                        this.$router.push({path: '/school/manage_message'})
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })

        }
    }
}
</script>

<style lang="scss" scoped>
    .preview {
        margin-top: 10px;
        // 支持数字和字母换行
        word-break: break-all;
        overflow-x: auto;
        overflow-y: auto;
        min-height: 100px;
        max-height: 430px;
        &::before {
            display: block;
        }
    }
    .mytest {
        // 首行缩进两字符
        text-indent: 2em;
    }
</style>
